<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <title>后台管理</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
    <style>

    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'"
                  style="background-color: black; transition:width .5s; min-height: 100vh">
            <div style="background-color: black; height: 60px; line-height: 60px; text-align: center;
                color: white; font-size: 20px;">
                <transition name="el-fade-in-linear">
                    <span name="fade" v-show="!isCollapse"><a href="/page/end/frame.html">X-Admin</a></span>
                </transition>
            </div>
            <!-- 菜单 -->
            <el-menu style="border: none;" background-color="black" text-color="#fff" active-text-color="#ffd04b"
                     :default-active="src" @select="handleSelect" :collapse="isCollapse">
                <el-menu-item index="index">
                    <i class="el-icon-data-line"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item :index="item.path" v-for="item in user.permission">
                    <i :class=`el-icon-${item.icon}`></i>
                    <span slot="title">{{item.name}}</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="background-color: black; line-height: 60px; color: white;">
                <el-row>
                    <el-col :span="1">
                        <i style="font-size: 22px; cursor: pointer"
                           :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="handleCollapse"></i>
                    </el-col>
                    <el-col :span="2" :offset="21" style="text-align: right">
                        <span style="color: white; margin-right: 10px">{{user.nickName}}</span>
                        <el-dropdown>
                            <img :src=`/files/${user.avatar}`
                                 style="width: 40px; height: 40px; margin-right: 10px; border-radius: 50%">
                            <el-dropdown-menu slot="dropdown" style="color: black; cursor: pointer; text-align: center;">
                                <span @click="handleSelect('person')" style="display:inline-block; padding: 10px 0; width: 100px; ">个人信息</span>
                                <span @click="logout" style="display:block; width: 100px;  ">退出</span>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <!-- 主体区域 -->
            <el-main>

                <iframe id="myiframe" :src="src + '.html?new=' + Math.random()" frameborder="0" scrolling="no"
                        style="width: 100%"></iframe>

            </el-main>
        </el-container>
    </el-container>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>


<script>
    function call() {
        vm.user = JSON.parse(sessionStorage.getItem("user"))
    }

    function changeIndex(index) {
        vm.src = index
        location.search = "target=" + index
        window.setInterval("reinitIframe()", 50);
    }

    // 实现 iframe  高度自适应
    function reinitIframe() {
        const iframe = document.getElementById("myiframe");
        try {
            const bHeight = iframe.contentWindow.document.body.scrollHeight;
            const dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            iframe.height = Math.max(bHeight, dHeight, (window.innerHeight - 105));
        } catch (ex) {
        }
    }


    window.setInterval("reinitIframe()", 50);

    let vm = new Vue({
        el: "#wrapper",
        data: {
            src: 'index',
            active: 0,
            user: {},
            isCollapse: false,
        },
        created() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            if (location.search) {
                this.src = getUrlParamValue('target')
            }
        },
        methods: {
            handleSelect(key) {
                this.src = key
                location.search = "target=" + this.src
                window.setInterval("reinitIframe()", 50);
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            logout() {
                $.get("/api/user/logout");
                sessionStorage.removeItem("user");
                location.href = "/page/end/login.html";
            }
        }
    })

    /**
     * 获取url参数
     * @param name
     * @returns {string|null}
     */
    function getUrlParamValue(name) {
        if (name == null || name === 'undefined') {
            return '';
        }
        let searchStr = decodeURI(location.search);
        let infoIndex = searchStr.indexOf(name + "=");
        if (infoIndex === -1) {
            return null;
        }
        let searchInfo = searchStr.substring(infoIndex + name.length + 1);
        let tagIndex = searchInfo.indexOf("&");
        if (tagIndex !== -1) {
            searchInfo = searchInfo.substring(0, tagIndex);
        }
        return searchInfo;
    }
</script>
</body>
</html>
